<template>
  <div class="module-box">
    <!-- 左 -->
    <div style="flex: 0 1 25%">
      <dv-border-box-1 style="width: 100%; height: 200px">
        <!-- 胶囊图 -->
        <CapsuleChart
          :dataChart="data"
          :colorChart="colors"
          :unitChart="unit"
          :showValueChart="showValue"
        />
      </dv-border-box-1>
      <dv-border-box-2 style="width: 100%; height: 200px">
        <dv-water-level-pond
          :config="configThree"
          style="width: 100%; height: 200px"
        />
      </dv-border-box-2>
      <dv-border-box-10 style="width: 100%; height: 200px">
        dv-border-box-3
      </dv-border-box-10>
    </div>
    <!-- 中 -->
    <div style="flex: 0 1 50%">
      <dv-border-box-9 style="width: 100%; height: 600px">
        <dv-flyline-chart
          :config="configFour"
          style="width: 100%; height: 100%"
        />
      </dv-border-box-9>
    </div>
    <!-- 右 -->
    <div style="flex: 0 1 25%">
      <dv-border-box-8 style="width: 100%; height: 300px">
        <dv-capsule-chart
          :config="configTow"
          style="width: 100%; height: 300px"
        />
      </dv-border-box-8>
      <dv-border-box-10 style="width: 100%; height: 300px">
        dv-border-box-
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import CapsuleChart from './CapsuleChart.vue'
export default {
  components: { CapsuleChart },
  name: 'moduleMains',
  props: ['configTow', 'configThree', 'configFour'],
  data() {
    return {
      data: [
        {
          name: '南阳',
          value: 167,
        },
        {
          name: '周口',
          value: 67,
        },
        {
          name: '漯河',
          value: 123,
        },
        {
          name: '郑州',
          value: 55,
        },
        {
          name: '西峡',
          value: 98,
        },
      ],
      colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
      unit: '单位',
      showValue: true,
    }
  },
}
</script>
